<!DOCTYPE html>
<html>
<head>
  <title> </title>
</head>
<body>
<!-- 引入Animate.css动画库 -->
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<!-- 引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<style>
  .inline-block {
    display: inline-block;
  }
  .rotate-enter-active {
    animation: selfRotateIn 1s;
  }
  .rotate-leave-active {
    animation: selfRotateOut 1s;
  }
  /* 命名避免与Animate.css冲突 */
  @keyframes selfRotateIn {
    0% {
      opacity: 0;
      transform: rotateZ(-180deg);
    }
    100% {
      opacity: 1;
      transform: rotateZ(0deg);
    }
  }
  @keyframes selfRotateOut {
    0% {
      opacity: 1;
      transform: rotateZ(0deg);
    }
    100% {
      opacity: 0;
      transform: rotateZ(180deg);
    }
  }
</style>
<div id="app">
  <button @click="isHidden = !isHidden">
    {{ isHidden ? '显示' : '隐藏' }}
  </button>
  <!-- 自定义的动画 -->
  <transition name="rotate">
    <span class="inline-block" v-if="!isHidden">自定义的动画</span>
  </transition>
  <!-- animate.css的动画 -->
  <transition
    name="custom"
    enter-active-class="animated rotateIn"
    leave-active-class="animated rotateOut">
    <span class="inline-block" v-if="!isHidden">animate.css动画</span>
  </transition>
</div>
<script type="text/javascript">
  // 声明 Vue 实例
  let vm = new Vue({
    el: '#app',
    data () {
      return {
        isHidden: true
      }
    }
  })
</script>
</body>
</html>